$code-color: #c7254e;
$code-background-color: #f9f2f4;
$code-font-family: Menlo, Monaco, Consolas, "Courier New", monospace;

code {
    background-color: $code-background-color;
    border-radius: rem(4px);
    color: $code-color;
    font-family: $code-font-family;
    font-size: 90%;
    padding: rem(2px 4px);
}

pre {
    background-color: $code-background-color;
    border-radius: 4px;
    color: $code-color;
    display: block;
    font-family: $code-font-family;
    line-height: 1.4;
    margin: rem(0 0 16px);
    padding: rem(16px);
    word-break: break-all;
    word-wrap: break-word;

    &.is-compact {
        font-size: rem(14px);
        padding: rem(8px 12px);
    }

    code {
        background: inherit;
        border-radius: 0;
        color: inherit;
        font-size: inherit;
        padding: 0;
    }
}

kbd {
    background-color: #333333;
    border-radius: rem(3px);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
    color: #ffffff;
    font-size: 90%;
    padding: rem(2px 4px);
}

kbd kbd {
    box-shadow: none;
    font-size: 100%;
    font-weight: bold;
    padding: 0;
}
